<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
	<a4j:loadStyle src="resource:///org/richfaces/demo/ajaxSamples/rspanel.xcss" />
	<h:form>
	
		<rich:panel>
			<f:facet name="header">
				<h:outputText value="Applying Skin on non-RichFaces Components"/>
			</f:facet>
			<h:commandLink value="DeepMarine">
				<a4j:actionparam name="skin" value="deepMarine" assignTo="#{skinBean.skin}"/>
			</h:commandLink>
			<rich:spacer width="20" />
			<h:commandLink value="BlueSky" >
				<a4j:actionparam name="skin" value="blueSky" assignTo="#{skinBean.skin}"/>
			</h:commandLink>
			<rich:spacer width="20" />
			<h:commandLink value="JapanCherry" >
				<a4j:actionparam name="skin" value="japanCherry" assignTo="#{skinBean.skin}"/>
			</h:commandLink>

			<rich:separator height="2"  style="padding:10px 0" />

			<h:panelGrid styleClass="rsPanel" width="250" columns="2">
				<h:outputText styleClass="rsLabel" value="Name:" />
				<h:inputText  styleClass="rsInput"  value="#{userBean.name}" />
				
				<h:outputText styleClass="rsLabel" value="Job:" />
				<h:inputText  styleClass="rsInput"  value="#{userBean.job}" />
				
				<h:panelGroup />
				<h:commandButton styleClass="rsButton"  value="Submit">
					<a4j:support  disableDefault="true" event="onclick" reRender="out" />
				</h:commandButton>
				
				<f:facet name="footer">
				</f:facet>
						
			</h:panelGrid>
			<h:panelGrid id="out" columns="1">
				
			<h:outputText value=""/>
			<h:outputText value="You have just entered:"/>
			<h:outputText value="Name: #{userBean.name}" />
			<h:outputText value="Job: #{userBean.job}" />
			</h:panelGrid>
			
		</rich:panel>
	</h:form>

</ui:composition>